<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>计算属性</h2>
    <p>count: {{ count }}</p>
    <!-- <p>doubleCount: {{ count * 2 }}</p> -->
    <p>doubleCount: {{ fn() }}</p>
    <p>doubleCount: {{ doubleCount }}</p>
    <p>4倍count: {{ fouthCount }}</p>
    <button v-on:click="count++">btn</button>

    <hr>

    <p>总库存: {{ total }}</p>

    <hr>

    <input type="text" v-model="firstname" />
    <span>{{ firstname }}</span>
    <input type="text" v-model="lastname" />
    <span>{{ lastname }}</span>
    <p>fullname: {{ fullName }}</p>


    <p>发布时间是：{{ formatDate }}</p>
  </div>

  <script src="../vue3.js"></script>
  <script>
    const {createApp} = Vue;

    createApp({
      data() {
        return {
          count: 2,
          list: [
            {
              name: "🍎",
              num: 5,
            },
            {
              name: "🍉",
              num: 10
            },
            {
              name: "🍌",
              num: 20
            }
          ],
          firstname: "zhang",
          lastname: "jun",

          sjc: 1728954780766,

          arr: [1,2,3,4,5,6,7,8,9], // 将奇数显示在页面上
          arr2: [
            {
              name: "张三",
              age: 20,
            },
            {
              name: "里斯",
              age: 25,
            },
            {
              name: "王五",
              age: 30,
            }
          ], // 将所有23岁以上的人显示在页面上
        }
      },
      methods: {
        fn() {
          return this.count * 2;
        }
      },

      // 计算属性
      // 可以根据一个或者多个响应式的数据(可以是data的数据，也可以是其他的计算属性)，通过计算或者变形得到另一个响应式的数据
      // 根据的那个响应式数据，就会作为计算属性的依赖。当这个数据发生改变的时候，计算属性就会得到一个新的值(只要count改变了，那么doubleCount就会改变)

      // 写法要求
      // 需要定义成函数，并且这个函数一定要有return
      // 在html里面用的时候，当作属性用(不需要加小括号)

      // 注意点
      // 计算属性里面是不能写异步(定时器和数据请求)的，必须同步返回
      // 计算属性的值不能主动修改，只能通过修改它的依赖，从而修改计算属性的值
      computed: {
        doubleCount() {
          return this.count * 2;
        },
        fouthCount() {
          return this.doubleCount * 2;
        },
        total() {
          return this.list.reduce((sum, item) => {
            return sum += item.num
          }, 0);
        },
        fullName() {
          return this.firstname + this.lastname;
        },
        formatDate() {
          const date = new Date(this.sjc);
          const year = date.getFullYear();
          const month = date.getMonth() + 1;
          const day = date.getDate();
          return `${year}年${month}月${day}日`
        }
      }
    }).mount("#app");
  </script>
</body>
</html>